import React, { useEffect } from 'react';
import type { FormProps } from 'antd';
import { Button, Radio, Form, Input, Select } from 'antd';
import { DataType } from './column';

interface MyFormProps {
    title: string,
    onCancel: () => void,
    addItem: (item: DataType) => void,
    Item: DataType | {},
    Update: (item: DataType) => void
}

export default function MyForm(props: MyFormProps) {
    const [form] = Form.useForm();
    useEffect(() => {
        form.setFieldsValue(props.Item)
    })
    const onFinish: FormProps<any>['onFinish'] = (values) => {
        // console.log(values);
        let tags: any = []
        if (values.tags == '前后端开发工程师') {
            tags = ['前端工程师', 'DEVELOPER']
        } else if (values.tags == '后端工程师') {
            tags = ['后端工程师', 'DEVELOPER']
        } else {
            tags = ['全栈工程师', '橙子表单']
        }
        if (props.title == '添加用户') {
            props.addItem({
                ...values,
                tags,
                key: Math.random()
            });
        } else {
            props.Update({
                ...props.Item,
                ...values,
                tags
            })
        }

        props.onCancel()
    };

    return (
        <div>
            <Form
                form={form}
                name="basic"
                onFinish={onFinish}
                autoComplete="off"
            >
                <Form.Item<DataType>
                    label="用户名"
                    name="name"
                    rules={[{ required: true, message: '请输入用户名' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item<DataType>
                    label="角色"
                    name="role"
                    rules={[{ required: true, message: '请选择角色' }]}
                >
                    <Radio.Group
                        options={[
                            { value: 1, label: '超级管理员' },
                            { value: 2, label: '开发者' }
                        ]}
                    />
                </Form.Item>

                <Form.Item<DataType>
                    label="简介"
                    name="desc"
                    rules={[{ required: true, message: '请输入用户简介' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="标签"
                    name="tags"
                >
                    <Select
                        style={{ width: 120 }}
                        defaultValue={'前端工程师'}
                        options={[
                            { value: '前端工程师', label: '前端工程师' },
                            { value: '后端工程师', label: '后端工程师' },
                            { value: '全栈工程师', label: '全栈工程师' }
                        ]}
                    />
                </Form.Item>

                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}
